<template>
    <div id="list">
     <div class="back">
     
     </div>
       <div class="top">
           <div :class="{active:btnsIndex==index}" @click="changelist1(index)"
           v-for="(item,index) in text" :key="index">{{item.name}}</div>
       </div>
       <div class="item" >
         <div v-for="(item,index) in   (isShow?tuanList:newlist)" :key="index">
           <img :src="item.picture" alt="">
        <span>
         <p>{{item.name}}</p>
         <p>￥{{item.min_price}}</p>
        </span>
         <button class="btn" @click=" change(item)">{{item.status==0?'马上抢':'已领取'}}</button>
         </div>
       </div>
   </div>
   
</template>



<script setup>
import { ref ,onMounted,} from 'vue';
import { tuan_list} from '../../api/api';

 
   var tuanList=ref([]);
   var text=ref([{name:'正在抢购'},{name:'上新预告'}])
   var newlist=ref([]);
   var  isShow=false;
   const btnsIndex = ref(0);
   onMounted(()=>{
     tuan_list({params:{status:0}}).then((res)=>{
       console.log(res.data);
       tuanList.value=res.data.list
       
     })
     tuan_list({params:{status:1}}).then((res)=>{
        res.data.list.map((item) =>{
        item.status=0
      });

        newlist.value=res.data.list
        
      })
   })
   var change=(item)=>{
            item.status++
      }
      var changelist1=(index)=>{
        console.log(index);
              btnsIndex.value=index
              if(btnsIndex.value==0){
                isShow=false
              }else{
                isShow=true
              }
      }

</script>
<style scoped>

.back{
   background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.shengqianhuodong.com%2Fwp-content%2Fuploads%2F2019%2F12%2F1-1575626982.jpeg&refer=http%3A%2F%2Fwww.shengqianhuodong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672886744&t=25f17a57e964f7a7f0f4fea7d581be9b');
   background-size: 100% 100%;
   opacity: 0.8;
   height: 200px;
 }
 .back img{
   height: 200px;
   width: 200px;
 }
 .top{
   display: flex;
 }
 .top div{
   margin-left: 20px;
 }
 .item{
   height: 370px;
   width: 100%;
   box-sizing: border-box;
   overflow: auto;
   padding: 10px;
   background-color: #F5F5F5;
   font-size: 14px;
 }
 .item div{
   width: 100%;
   height: 120px;
   background-color: white;
   border-radius: 20px;
   box-sizing: border-box;
   padding: 10px;
   display: flex;
   position: relative;
   margin-bottom: 10px;
 }
 .item div img{
   width: 100px;
   height: 100px;
   border-radius: 10px;
 }
 .item div span{
   width: 125px;
   font-size: 12px;
 }
 .item div span p{
   margin-bottom: 60px;
 }
 .item div span p:nth-of-type(2){
   color: red;
   font-size: 16px;
 }
 .btn{
position: absolute;
right: 13px;
bottom: 17px;
background-color: red;
color: white;
border: 0;
width: 52px;
height: 28px;
border-radius: 20px;
 }
 .active{
   color: red;
 }
 .foot{
   position:fixed;
   bottom: 0%;
   display: flex;
   justify-content: space-around;
   align-items: center;
   width: 100%;
   height: 50px;
   background-color: white;
   font-size: 14px;
 }
 .active{
   color: lightcoral;
 }
 .top{
margin: 10px 15px;
}
.center{
 display: flex;
 justify-content: space-around;
 font-size: 14px ;
 font-weight: bold;
 margin-bottom: 10px;
}

.bottom{
 height: 220px;
overflow: auto;
}
.bottom div{
 display: flex;
 width: 100%;
 justify-content: space-around;
 margin-bottom: 10px;
 background: white;
}
.bottom h5{
 height: 50px;
 width: 100px;
 margin-right: 20px;
}
.bottom p{
 font-size: 14px;
}
.bottom img{
 width: 80px;
 height: 80px;
}
</style>
